<template>
  <view>
    <view class="form-content">
      <u-form
        :model="form"
        ref="refForm"
        label-position="top"
        :error-type="['toast']"
      >
        <u-form-item :label="title" :prop="feild" :required="true">
          <view class="white-bg">
            <u-input v-model="form[feild]" />
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view class="btn-box">
      <u-button shape="circle" type="primary" plain @click="confirm"
        >保存</u-button
      >
    </view>
  </view>
</template>
<script lang="ts" setup>
import { updateCurrUser } from '@/api/modules/user';
import { onLoad } from '@dcloudio/uni-app';
import { valueType, CascaderOptions } from '../data';
import { getLabel } from '../index';
import { cellClick } from '@/hooks/useBack';

const confirm = () => {
  if (!form.value[feild.value]) {
    uni.showToast({
      title: '内容不能为空',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  const labelArr: (string | undefined)[] = [];
  let professionTypeValue = form.value.professionType
    ? form.value.professionType.split(',')
    : [];
  const label = getLabel(CascaderOptions as any[], professionTypeValue);
  labelArr.push(label);
  const key = valueType.professionType;
  form.value[key] = labelArr.join(',');
  updateCurrUser(form.value).then(() => {
    cellClick();
  });
};
const feild = ref('');
const form = ref<any>({});
const title = ref('');
onLoad(() => {
  const {
    feild: feildStr,
    title: titleStr,
    params,
  } = (uni as any).$Router.getQuery();
  feild.value = feildStr;
  title.value = titleStr;
  form.value = JSON.parse(decodeURIComponent(params));
  console.log(form.value);
  uni.setNavigationBarTitle({
    title: titleStr,
  });
});
</script>
<style lang="scss">
page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}
.btn-box {
  position: absolute;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
}
.form-content {
  padding: 32rpx;
  .white-bg {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 20rpx;
  }
}
</style>
